<template>
	<div class="sdt" ref="echartDom"></div>
</template>

<script setup lang="ts">

import { inject, ref, shallowRef, onMounted, onUnmounted, watch, toRaw, watchEffect, defineEmits,computed } from "vue";

// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
		type: Object,
		default: () => { },
	},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogPieData'])
var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
// 字体自适应方法
const pxToRem = (px: number) => {
	const scale = document.documentElement.clientWidth / 1920;
	return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let COLOR_ALL = props.housingSupplyStatsData.colors//颜色
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let legendData = props.housingSupplyStatsData.legendData
let gridStyle = props.housingSupplyStatsData.gridConfig//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置
let names = props.housingSupplyStatsData.names
const getEchart = () => {
	if (echartDom.value) {
		const tooltipTextStyle = {
			color: "#fff",
			fontSize: pxToRem(14),
		};

		// 提示框背景
		const tooltipBackgroundColor = "rgba(47, 99, 205, 0.5)";
		myChart.value = echarts.init(echartDom.value);
		// 图例配置
		// 网格区域
		const gridConfig = {
			left: gridStyle.left,
			right: gridStyle.right,
			bottom: gridStyle.bottom,
			top: gridStyle.top,
			containLabel: true,
		};
		const legendConfig = {
			show: true,
			icon: 'rect',
			left: 'center',
			top: pxToRem(5),
			itemWidth: pxToRem(10),
			itemHeight: pxToRem(10),
			itemGap: pxToRem(5),
			textStyle: {
				color: "#fff",
				fontSize: pxToRem(12),
				textStyle: {
					color: "#fff",
					fontSize: pxToRem(12),
					rich: {},
					padding: [0, 0, pxToRem(-3), 0],
				},
				data: seriesData.map((item: { jgfzfw: any; }) => item.jgfzfw),
			},
		};

		const lowArray: any[] = [];
		const stableArray: any[] = [];
		const unevenArray: any[] = [];
		const numbers = []
		const barColor = []
		toRaw(seriesData).map((item) => {
			numbers.push(item.priceList[0])
						if (item.jgfzfw		=== '偏低') {
							   barColor.push({
											name:item.name,
											color:'rgba(31, 183, 255, 0.60)'
										})
										lowArray.push(item.priceList);
										// stableArray.push([])
										// unevenArray.push([])
						} else if (item.jgfzfw === '稳定') {
										barColor.push({
											name:item.name,
											color:'rgba(90, 190, 82, 0.60)'
										})
										stableArray.push(item.priceList);
										// unevenArray.push([])
										// lowArray.push([])
						} else if (item.jgfzfw === '分布不平衡') {
										barColor.push({
											name:item.name,
           color:'rgba(255, 195, 82, 0.60)'
										})
										unevenArray.push(item.priceList);
										// lowArray.push([])
										// stableArray.push([]);
						}
		});
		const maxNumber =  Math.max(...numbers);
		const barData = []
		for(let i = 0; i < numbers.length;i++){
			barData.push(maxNumber + 1)
		}
		console.log('barData',barData)
		const resultArray = [lowArray, stableArray, unevenArray];
		const	seriesConfig = [
			{
				name: toRaw(legendData)[0],
				type: "boxplot",
				data: resultArray[0],
			},
			{
				name: toRaw(legendData)[1],
				type: "boxplot",
				data: resultArray[1],
				boxWidth: pxToRem(15),
				 z: 2 // 系列层级
			},
			{
				name: toRaw(legendData)[2],
				type: "boxplot",
				data: resultArray[2],
				boxWidth: pxToRem(15),
				 z: 2 // 系列层级
			},
			{
				type: 'bar', 
				data: barData, 
				z: 1, 
				itemStyle: {
						color: (params) => {
							let colorValue = ''
								barColor.map(item => {
								if(item.name == params.name){
									colorValue = item.color
								}
							})
							
							return colorValue
						}
				},
				showInLegend: false // 隐藏柱状图的 legend
    }
		]
		const option = {
			tooltip: {
				trigger: "axis",
				
				formatter: function (params) {
						// params 是包含数据信息的对象
						const tooltipObj = params.filter(item => item.value.length == 6)
						return (
											'系列名称: ' + tooltipObj[0].seriesName + '<br/>' +
											'范围: ' + tooltipObj[0].name + '<br/>' +
											'最大值: ' + tooltipObj[0].value[1] + '<br/>' +
											'上四分位数: ' + tooltipObj[0].value[2] + '<br/>' +
											'中位数: ' + tooltipObj[0].value[3] + '<br/>' +
											'下四分位数: ' + tooltipObj[0].value[4] + '<br/>' +
											'最小值: ' + tooltipObj[0].value[5]
							);
				},
				axisPointer: {
					type: "line",
					cursor: "pointer" // 设置鼠标移入时显示小手指样式
				},
				position: function (point: any[], params: any, dom: any, rect: any, size: any) {
					return [point[1], '10%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
				},
				textStyle: tooltipTextStyle,
				backgroundColor: tooltipBackgroundColor,
				borderColor: '#66FFFF', // 设置边框颜色为红色
    borderWidth: 1, // 设置边框宽度
			},
			grid: gridConfig,
			xAxis: {
				type: "category",
				boundaryGap: true,
				axisLine: {
					show: true // 隐藏X轴线
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					textStyle: {
						color: "#FFFFFF",
						fontSize: pxToRem(12),
					},
				},
				data: seriesData.map((item: { name: any; }) => item.name),
			},
			yAxis: {
				type: "value",
				name: '价格',
				nameTextStyle: {
					color: "white",
					fontSize: pxToRem(12),
					padding:[0,0,0,pxToRem(-20)]
				},
				splitLine: {
					show: false,

				},
				axisLabel: {
					formatter: "{value}",
					color: "white",
					fontSize: pxToRem(12),
					verticalAlign: 'middle',
					align: 'center'
				},
			},
			legend: legendConfig,
			series: seriesConfig,
		};
		console.log('option',option)
		myChart.value.setOption(option);
		myChart.value.on("click", (params) => {
			seriesData.map((item) => {
				if(item.name == params.name){
						emit('getCode', item)
				}	
			})
		});
	}
};
const updateChart = () => {
	if (myChart.value) {
		myChart.value.dispose(); // 销毁旧图表实例
	}

	COLOR_ALL = props.housingSupplyStatsData.colors//颜色
	legendStyle = props.housingSupplyStatsData.legendStyle//图例
	legendData = props.housingSupplyStatsData.legendData
	gridStyle = props.housingSupplyStatsData.gridConfig//网格
	seriesData = props.housingSupplyStatsData.seriesData//serires数据
	seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置
	names = props.housingSupplyStatsData.names

	getEchart();
};

watchEffect(() => {
	updateChart();
});

onMounted(() => {
	getEchart();
	window.addEventListener("resize", () => {
		if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
		}
		getEchart(); // 创建新的图表实例
	});
});

onUnmounted(() => {
	window.removeEventListener("resize", () => {
		if (myChart.value) {
			myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
		}
	});
});
</script>

<style scoped lang="less">
.sdt {
	width: 100%;
	height: 100%;
}

.echarts-background {
	background-color: transparent !important;
}
</style>
